<template>
  <div class="messageArea h100" ref="msgBox" @scroll="scroll">
    <template v-if="msgList.length == 0">
      <slot name="emptyImg"></slot>
    </template>
    <template v-else>
      <div style="height:100px" v-if="msgList.length > 0"></div>
      <ul class="msgList" v-if="msgList.length > 0">
        <li class="item" v-for="(v,k) in msgList" :key="k">
          <div class="timeShow" v-if="funTimeShow(k,'addTime')">
            <span class="time">{{ $moment(v.addTime).format('Y-M-D a h:mm') }}</span>
          </div><!-- 聊天时间，通过funTimeShow判断是否显示 -->
          <div :class="['msgBox',v.isMe?'isMe':'isCus']">
            <slot name="prefix" :item="v"></slot>
            <el-image class="face" :src="v.face" fit="cover"></el-image>
            <div class="esName">{{ v.esName }}</div>
            <div class="msgBody">
              <!-- {{v.msg.text}} -->
              <WxText v-if="v.msg.msgtype=='text'" :isMe="v.isMe" :obj="v.msg.text"></WxText>
              <!-- <WxText2 v-if="v.msg.msgtype=='text' && !v.isMe" :isMe="v.isMe" :obj="v.msg.text"></WxText2> -->
              <WxImage v-if="v.msg.msgtype=='image'" :isMe="v.isMe" :obj="v.msg.image"></WxImage>
              <WxVideo v-if="v.msg.msgtype=='video'" :isMe="v.isMe" :obj="v.msg.video" :allowPlay="true"></WxVideo>
              <WxFile v-if="v.msg.msgtype=='file'" :isMe="v.isMe" :obj="v.msg.file"></WxFile>
              <WxMpnews v-if="v.msg.msgtype=='mpnews'" :isMe="v.isMe" :obj="v.msg.mpnews"></WxMpnews>
              <WxVoice v-if="v.msg.msgtype=='voice'" :isMe="v.isMe" :obj="v.msg.voice"></WxVoice>
              <WxLink v-if="v.msg.msgtype=='link'" :isMe="v.isMe" :obj="v.msg.link"></WxLink>
              <slot name="suffix" :data="v"></slot>
            </div>
          </div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name:"wxMsgArea",
  components: {
    WxText: () => { return import('./wx_text.vue') },
    // WxText2:()=>{ return import('./components/wx_text_gupin.vue')},
    WxMpnews: () => { return import('./wx_mpnews.vue') },
    WxImage: () => { return import('./wx_image.vue') },
    WxVideo: () => { return import('./wx_video.vue') },
    WxFile: () => { return import('./wx_file.vue') },
    WxVoice: () => { return import('./wx_voice.vue') },
    WxLink: () => { return import('./wx_link.vue') },
  },
  props:{
    msgList:{
      type:Array,
      default:function(){ return [] }
    },
    upwardBias:{
      type:Number,
      default:function(){ return 0; }
    },
    downwardBias:{
      type:Number,
      default:function(){ return 0; }
    },
    cusId:{
      type:String,
      default:function(){ return '' }
    },
  },
  data() {
    return {
      isDev:process.env.NODE_ENV== 'development',
    }
  },
  methods:{
    scroll:function(){
      let dom = this.$refs.msgBox;
      let top  = 0 + this.upwardBias;
      let bottom = dom.scrollHeight - dom.clientHeight - this.downwardBias;
      if(dom.scrollTop <= top ){
        this.$emit('scroll','Top')
      }
      if(dom.scrollTop >= bottom ){
        this.$emit('scroll','Bottom')
      }
      return
    },
    funTimeShow: function (k, keyName) {
      if (k > 0) {
        let $moment = this.$moment;
        let msgList = this.msgList;
        let a = $moment(msgList[k - 1][keyName])
        let b = $moment(msgList[k][keyName])
        let diff = $moment(a).diff(b, 'minutes')
        return diff < -2 || diff > 0;
      } else {
        return true
      }
    },
  },
}
</script>

<style lang="less" scoped>
.h100{
  height:100%;
  overflow:auto;
}

@import url('../assets/config.less');
@import url('../assets/style.less');
.msgList{
  .timeShow{
    text-align: center;
    .time {
      display: inline-block;
      font-size: 12px;
      margin: 24px auto;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: #D9D9D9;
    }
  }
  .item+.item{margin-top:unit((@defPadding),px)}
  .msgBox{
    @faceW:40;
    position: relative;
    margin:0 unit((@defPadding/2),px);
    .face{
      position:absolute;
      top:0;
      width:unit(@faceW,px);height:unit(@faceW,px);
      border-radius: 50%;
    }
    &.isMe{
      text-align: right;
      padding-right:unit((@faceW + @defPadding),px);
      .face{right:0;}
    }
    &.isCus{
      text-align: left;
      padding-left:unit((@faceW + @defPadding),px);
      .face{left:0;}
    }
    .esName{
      font-size:14px;
      margin-bottom:8px;
      color:#666;
    }
  }
}

</style>